<template>
  <view class="follow">
    <!-- nav-bar区域 -->
    <nav-bar class="nav-bar">
      <view slot="left" class="nav-left">
        <text class="iconfont icon-zhaoxiangji "></text>
        <text>随拍</text>
      </view>
      <view slot="center" class="nav-center">
        <view class="nav-item ">
          <view :class="{ activeClass: 'attention' === changeText }" @click="navClick('attention')">
            关注
          </view>
        </view>
        <view class="nav-item">
          <view :class="{ activeClass: 'friend' === changeText }" @click="navClick('friend')">
            好友
          </view>
        </view>
      </view>
    </nav-bar>
    <scroll-view scroll-y="true" class="my-scroll" @scroll="scroll" :scroll-top="scrollTop">
      <view>
        <!-- 添加随拍区域 -->
        <view class="snapshot">
          <view class="userPhoto">
            <image src="../../static/logo.png" mode=""></image>
            <text>添加随拍</text>
            <text class="iconfont icon-jiahao3"></text>
          </view>
        </view>
        <!-- 视频列表区域 249121,243123-->
        <view class="follow-video">
          <view v-for="item in attentionVideo" :key="item.data.vid" id="videoItem">
            <follow-video :video-item="item" ref="videoItem"></follow-video>
          </view>
        </view>
      </view>
    </scroll-view>
    <tab-bar currentIndex="1"></tab-bar>
  </view>
</template>

<script>
import FollowVideo from '../../components/content/follow/FollowVideo.vue'
import request from '../../network/request.js'
export default {
  components: { FollowVideo },
  data() {
    return {
      changeText: 'attention',
      attentionVideo: [],
      videosTop: [],
      playVideoIndex: -1,
      scrollTop: 0,
      subHeight: 200
    }
  },
  onLoad() {
    this.getFollowVideo(249121)
    this.$bus.$once('imgLoadFinish', this.getDoms)
  },
  methods: {
    async getFollowVideo(id) {
      const { datas } = await request('/video/group', { id })
      this.attentionVideo = datas
    },
    navClick(type) {
      this.changeText = type
      if (type === 'attention') {
        this.getFollowVideo(249121)
      } else {
        this.getFollowVideo(243123)
      }
      if (this.$refs.videoItem.length) {
        this.$refs.videoItem.forEach(item => {
          item.isVideoShow = false
        })
        getApp().globalData.globalVideoPlay = {}
        this.scrollTop = 1
        setTimeout(() => {
          this.scrollTop = 0
          this.$refs.videoItem[0].isVideoShow = true
        }, 100)
      }
    },
    scroll(e) {
      let positionY = e.detail.scrollTop
      for (let i = 0; i < this.videosTop.length - 1; i++) {
        if (
          this.playVideoIndex !== i &&
          positionY >= this.videosTop[i] &&
          positionY < this.videosTop[i + 1]
        ) {
          this.playVideoIndex = i
          this.$refs.videoItem.forEach(item => (item.isVideoShow = false))
          this.$refs.videoItem[i].isVideoShow = true
        }
      }
    },
    getDoms() {
      const query1 = uni.createSelectorQuery().in(this)
      query1
        .select('.snapshot')
        .boundingClientRect(data => {
          this.subHeight = data.height * 2
        })
        .exec()
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('#videoItem')
        .boundingClientRect(data => {
          this.videosTop = data.map(item => item.top - this.subHeight)
          this.videosTop.push(Number.MAX_VALUE)
        })
        .exec()
      this.$refs.videoItem[0].isVideoShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.follow {
  height: 100vh;
  background: #181725;
}
::v-deep .left,
.right {
  width: 150rpx !important;
}
.nav-left {
  font-size: 32rpx;
  color: #eee;
  .icon-zhaoxiangji {
    font-size: 36rpx;
    margin-right: 10rpx;
  }
}
.nav-center {
  display: flex;
  width: 55%;
  height: 100%;
  .nav-item {
    margin: auto;
    line-height: 64rpx;
    color: gray;
  }
}
.activeClass {
  color: #fff !important;
  border-bottom: 4rpx solid #f6a317;
}

.snapshot {
  height: 200rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  color: #eee;
  font-size: 28rpx;
  .userPhoto {
    position: relative;
    image {
      margin: auto;
      display: block;
      height: 100rpx;
      width: 100rpx;
      border-radius: 50%;
      margin-bottom: 10rpx;
    }
    .icon-jiahao3 {
      position: absolute;
      right: 0;
      bottom: 50rpx;
      background: #fff;
      border-radius: 50%;
      color: #000;
      border: 2rpx solid #000;
      border: 1;
    }
  }
}
.my-scroll {
  margin-top: 20rpx;
  height: calc(100vh - 232rpx);
}
</style>
